<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人笔记系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <script src="../js/jquery.1.9.min.js"></script>
</head>
<script>
    function search(content, currentPage) {

        var n = "";
        $.get("/wenote/note?method=findNoteBySearch", {content: content, currentPage: currentPage}, function (data) {
            $("#totalCount").html(data.totalCount);
            $("#totalPage").html(data.totalPage);
            var firstPage = '<a style="margin-left: 7px;" href="javascript:search(\'' + content + '\',1);" class="ui mini teal basic button">首页</a>';

            //计算上一页的页码
            var beforeNum = data.currentPage - 1;
            if (beforeNum <= 0) {
                beforeNum = 1;
            }

            var beforePage = '<a href="javascript:search(\'' + content + '\',' + beforeNum + ');" class="ui mini teal basic button">上一页</a>';

            n += firstPage;
            n += beforePage;

            /*
                1.一共展示10个页码，能够达到前5后4的效果
                2.如果前边不够5个，后边补齐10个
                3.如果后边不足4个，前边补齐10个
            */

            // 定义开始位置begin,结束位置 end
            var begin;
            var end;

            if (data.totalPage < 10) {
                begin = 1;
                end = data.totalPage;
            } else {
                begin = data.currentPage - 5;
                end = data.currentPage + 4;

                if (begin < 1) {
                    begin = 1;
                    end = begin + 9;
                }

                if (end > data.totalPage) {
                    end = data.totalPage;
                    begin = end - 9;
                }
            }

            for (var i = begin; i <= end; i++) {
                var l;
                //判断当前页码是否等于i
                if (data.currentPage == i) {
                    l = '<a href="javascript:search(\'' + content + '\',' + i + ');" class="ui mini blue button">' + i + '</a>';
                } else {
                    //创建页码的li
                    l = '<a href="javascript:search(\'' + content + '\',' + i + ');" class="ui mini teal basic button">' + i + '</a>';
                }
                n += l;
            }

            var lastPage = '<a href="javascript:search(\'' + content + '\',' + data.totalPage + ');" class="ui mini teal basic button">尾页</a>';

            var nextNumber = currentPage + 1;
            if (nextNumber >= data.totalPage) {
                nextNumber = data.totalPage;
            }

            var nextPage = '<a href="javascript:search(\'' + content + '\',' + nextNumber + ');" class="ui mini teal basic button">下一页</a>';

            n += nextPage;
            n += lastPage;

            //c+='<div  class="ui padded vertical segment m-padded-tb-large"><div  class="ui middle aligned mobile reversed stackable grid"><div class="eleven wide column"><h3 class="ui header"><a style="color: #0f0f0f;" href="noteComment.html" target="_self" class="m-black">'+data.data[i].noteTitle+'</a></h3><p class="m-text">'+data.data[i].noteContent+'</p><div class="ui grid"><div class="eleven wide column"><div class="ui mini horizontal link list"><div class="item"><img src="'+data.data[i].image+'" alt="" class="ui avatar image"><div class="content"><a href="#" class="header">'+data.data[i].author+'</a></div></div><div class="item"><i class="calendar icon"></i><span>'+data.data[i].createTime+'</span></div><div class="item"><i class="eye icon"></i> <span>'+data.data[i].visit+'</span></div></div></div><div class="right aligned five wide column"><a href="#" target="_self" class="ui teal basic label m-padded-tiny m-text-thin">'+data.data[i].categoryName+'</a></div></div></div><div class="five wide column"><a href="noteComment.html" target="_self"><img src="'+data.data[i].image+'" alt="" class="ui rounded image"></a></div></div></div>';
            $("#notePageList").html(n);

            var notelis = "";
            for (var i = 0; i < data.list.length; i++) {
                notelis += '<div  class="ui padded vertical segment m-padded-tb-large"><div  class="ui middle aligned mobile reversed stackable grid"><div class="eleven wide column"><h3 class="ui header"><a style="color: #0f0f0f;" href="noteComment.html" target="_self" class="m-black">' + data.list[i].noteTitle + '</a></h3><p class="m-text">' + data.list[i].noteContent + '</p><div class="ui grid"><div class="eleven wide column"><div class="ui mini horizontal link list"><div class="item"><img src="' + data.list[i].image + '" alt="" class="ui avatar image"><div class="content"><a href="#" class="header">' + data.list[i].author + '</a></div></div><div class="item"><i class="calendar icon"></i><span>' + data.list[i].createTime + '</span></div><div class="item"><i class="eye icon"></i> <span>' + data.list[i].visit + '</span></div></div></div><div class="right aligned five wide column"><a href="#" target="_self" class="ui teal basic label m-padded-tiny m-text-thin">' + data.list[i].categoryName + '</a></div></div></div><div class="five wide column"><a href="noteComment.html" target="_self"><img src="' + data.list[i].image + '" alt="" class="ui rounded image"></a></div></div></div>';

            }
            $("#noteList").html(notelis);
            //定位到页面顶部
            window.scrollTo(0, 0);
        });
    }

    $(function () {
        $.get("/wenote/user?method=findUser", {}, function (data) {
            $("#loginUser").html(data.nickname);
        });


        // <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
        //         <span>方法论</span>
        //         <div class="detail">23</div>
        //         </a>
        var a = "";
        $.get("/wenote/tag?method=findAllTagByPage", {}, function (data) {
            for (var i = 0; i < data.list.length; i++) {
                a += '<a href="/wenote/view/tagBlog.html?tagName='+escape(data.list[i].tagName)+'&currentPage=" target="_self" class="ui teal basic left pointing label m-margin-tb-tiny">' + data.list[i].tagName + '<div class="detail">' + data.list[i].cnt + '</div></a>';
            }
            $("#tagList").html(a);
        });


        // <a href="#" class="item">
        //         学习日志
        //         <div class="ui teal basic left pointing label">13</div>
        //         </a>

        var b = "";
        $.get("/wenote/category?method=findAllCategoryByPage", {}, function (data) {
            for (var i = 0; i < data.list.length; i++) {
                b += '<a href="/wenote/view/categoryBlog.html?categoryName='+escape(data.list[i].categoryName)+'&currentPage=" class="item">' + data.list[i].categoryName + '<div class="ui teal basic left pointing label">' + data.list[i].cnt + '</div></a>';
            }
            $("#categoryList").html(b);
        });

        //         <div class="eleven wide column">
        //         <h3 class="ui header"><a style="color: #0f0f0f;" href="noteComment.html" target="_self" class="m-black">q你真的理解什么是财富自由吗?</a>
        //     </h3>
        //     <p class="m-text">
        //         正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
        //     <div class="ui grid">
        //         <div class="eleven wide column">
        //         <div class="ui mini horizontal link list">
        //         <div class="item">
        //         <img src="https://unsplash.it/100/100?image=1005" alt=""
        // class="ui avatar image">
        //         <div class="content"><a href="#" class="header">java小生不才</a></div>
        //     </div>
        //     <div class="item">
        //         <i class="calendar icon"></i><span>2017-10-01</span>
        //     </div>
        //     <div class="item">
        //         <i class="eye icon"></i> <span>2342</span>
        //     </div>
        //     </div>
        //     </div>
        //     </div>
        //     </div>
        //
        //     <div class="five wide column">
        //         <a href="noteComment.html" target="_blank">
        //         <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
        //         </a>
        //         </div>
        //

        load(null);

        $("#searchBtn").click(function () {
            var content = $("#searchInput").val();
            search(content, null);

            // $.get("/wenote/note?method=findNoteBySearch", {content: content,currentPage:currentPage}, function (data) {
            //     $("#totalCount").html(data.totalCount);
            //     $("#totalPage").html(data.totalPage);
            //     var firstPage = '<a style="margin-left: 7px;" href="#" class="ui mini teal basic button" onclick="load(1)">首页</a>';
            //
            //     //计算上一页的页码
            //     var beforeNum = data.currentPage - 1;
            //     if (beforeNum <= 0) {
            //         beforeNum = 1;
            //     }
            //
            //     var beforePage='<a href="#" class="ui mini teal basic button" onclick="load('+beforeNum+')">上一页</a>';
            //
            //     e+=firstPage;
            //     e+=beforePage;
            //
            //     /*
            //         1.一共展示10个页码，能够达到前5后4的效果
            //         2.如果前边不够5个，后边补齐10个
            //         3.如果后边不足4个，前边补齐10个
            //     */
            //
            //     // 定义开始位置begin,结束位置 end
            //     var begin;
            //     var end;
            //
            //     if (data.totalPage < 10) {
            //         begin = 1;
            //         end = data.totalPage;
            //     } else {
            //         begin = data.currentPage - 5;
            //         end = data.currentPage + 4;
            //
            //         if (begin < 1) {
            //             begin = 1;
            //             end = begin + 9;
            //         }
            //
            //         if (end > data.totalPage) {
            //             end = data.totalPage;
            //             begin = end - 9;
            //         }
            //     }
            //
            //     for (var i = begin; i <= end; i++) {
            //         var li;
            //         //判断当前页码是否等于i
            //         if (data.currentPage == i) {
            //             li = '<a href="#" class="ui mini blue button" onclick="load('+i+')">'+i+'</a>';
            //         } else {
            //             //创建页码的li
            //             li = '<a href="#" class="ui mini teal basic button" onclick="load('+i+')">'+i+'</a>';
            //         }
            //         e += li;
            //     }
            //
            //     var lastPage='<a href="#" class="ui mini teal basic button" onclick="load('+data.totalPage+')">尾页</a>';
            //
            //     var nextNumber = data.currentPage + 1;
            //     if (nextNumber >= data.totalPage) {
            //         nextNumber = data.totalPage;
            //     }
            //
            //     var nextPage='<a href="#" class="ui mini teal basic button" onclick="load('+nextNumber+')">下一页</a>';
            //
            //     e+=nextPage;
            //     e+=lastPage;
            //
            //     //c+='<div  class="ui padded vertical segment m-padded-tb-large"><div  class="ui middle aligned mobile reversed stackable grid"><div class="eleven wide column"><h3 class="ui header"><a style="color: #0f0f0f;" href="noteComment.html" target="_self" class="m-black">'+data.data[i].noteTitle+'</a></h3><p class="m-text">'+data.data[i].noteContent+'</p><div class="ui grid"><div class="eleven wide column"><div class="ui mini horizontal link list"><div class="item"><img src="'+data.data[i].image+'" alt="" class="ui avatar image"><div class="content"><a href="#" class="header">'+data.data[i].author+'</a></div></div><div class="item"><i class="calendar icon"></i><span>'+data.data[i].createTime+'</span></div><div class="item"><i class="eye icon"></i> <span>'+data.data[i].visit+'</span></div></div></div><div class="right aligned five wide column"><a href="#" target="_self" class="ui teal basic label m-padded-tiny m-text-thin">'+data.data[i].categoryName+'</a></div></div></div><div class="five wide column"><a href="noteComment.html" target="_self"><img src="'+data.data[i].image+'" alt="" class="ui rounded image"></a></div></div></div>';
            //     $("#notePageList").html(e);
            //     for(var i=0;i<data.list.length;i++){
            //         d += '<div  class="ui padded vertical segment m-padded-tb-large"><div  class="ui middle aligned mobile reversed stackable grid"><div class="eleven wide column"><h3 class="ui header"><a style="color: #0f0f0f;" href="noteComment.html" target="_self" class="m-black">' + data.list[i].noteTitle + '</a></h3><p class="m-text">' + data.list[i].noteContent + '</p><div class="ui grid"><div class="eleven wide column"><div class="ui mini horizontal link list"><div class="item"><img src="' + data.list[i].image + '" alt="" class="ui avatar image"><div class="content"><a href="#" class="header">' + data.list[i].author + '</a></div></div><div class="item"><i class="calendar icon"></i><span>' + data.list[i].createTime + '</span></div><div class="item"><i class="eye icon"></i> <span>' + data.list[i].visit + '</span></div></div></div><div class="right aligned five wide column"><a href="#" target="_self" class="ui teal basic label m-padded-tiny m-text-thin">' + data.list[i].categoryName + '</a></div></div></div><div class="five wide column"><a href="noteComment.html" target="_self"><img src="' + data.list[i].image + '" alt="" class="ui rounded image"></a></div></div></div>';
            //     }
            //     $("#noteList").html(d);
            //     //定位到页面顶部
            //     window.scrollTo(0, 0);
            // });
        });

        var number = 0;
        var newNote_list = '';
        $.get("/wenote/note?method=findNoteByTime", {}, function (data) {
            if (data.flag) {
                for (var i = 0; i < data.data.length; i++) {
                    number++;
                    newNote_list += '<a href="noteComment.html?noteID='+data.data[i].noteID+'" class="item m-text-thin">' + data.data[i].noteTitle + '</a>';
                    if (number >= 3) {
                        break;
                    }
                }
            } else {
                $("#newNote").html(data.errorMsg);
            }
            $("#newNote").html(newNote_list);
        });

        // $('body').on('click','#viewNoteV', function () {
        //
        // });
    });

    var num = 0;
    var Note_list = '';
    $.get("/wenote/note?method=findNoteByVisit", {}, function (data) {
        if (data.flag) {
            for (var i = 0; i < data.data.length; i++) {
                num++;
                Note_list +='<form><div style="margin: 0;" class="ui segment"> <a id="viewNoteV" href="noteComment.html?noteID='+data.data[i].noteID+'" target="_self" class="m-black m-text-thin" data-value="'+data.data[i].noteID+'">'+data.data[i].noteTitle+'</a></div></form>';
                if (num >= 3) {
                    break;
                }
            }
        } else {
            $("#hotNote").html(data.errorMsg);
        }
        $("#hotNote").html(Note_list);
    });

    function load(currentPage) {
        var c = "";
        $.get("/wenote/note?method=findAllNoteByPage", {currentPage: currentPage}, function (data) {
            $("#totalCount").html(data.totalCount);
            $("#totalPage").html(data.totalPage);
            var firstPage = '<a style="margin-left: 7px;" href="#" class="ui mini teal basic button" onclick="load(1)">首页</a>';

            //计算上一页的页码
            var beforeNum = data.currentPage - 1;
            if (beforeNum <= 0) {
                beforeNum = 1;
            }

            var beforePage = '<a href="#" class="ui mini teal basic button" onclick="load(' + beforeNum + ')">上一页</a>';

            c += firstPage;
            c += beforePage;

            /*
                1.一共展示10个页码，能够达到前5后4的效果
                2.如果前边不够5个，后边补齐10个
                3.如果后边不足4个，前边补齐10个
            */

            // 定义开始位置begin,结束位置 end
            var begin;
            var end;

            if (data.totalPage < 10) {
                begin = 1;
                end = data.totalPage;
            } else {
                begin = data.currentPage - 5;
                end = data.currentPage + 4;

                if (begin < 1) {
                    begin = 1;
                    end = begin + 9;
                }

                if (end > data.totalPage) {
                    end = data.totalPage;
                    begin = end - 9;
                }
            }

            for (var i = begin; i <= end; i++) {
                var li;
                //判断当前页码是否等于i
                if (data.currentPage == i) {
                    li = '<a href="#" class="ui mini blue button" onclick="load(' + i + ')">' + i + '</a>';
                } else {
                    //创建页码的li
                    li = '<a href="#" class="ui mini teal basic button" onclick="load(' + i + ')">' + i + '</a>';
                }
                c += li;
            }

            var lastPage = '<a href="#" class="ui mini teal basic button" onclick="load(' + data.totalPage + ')">尾页</a>';

            var nextNumber = currentPage + 1;
            if (nextNumber >= data.totalPage) {
                nextNumber = data.totalPage;
            }

            var nextPage = '<a href="#" class="ui mini teal basic button" onclick="load(' + nextNumber + ')">下一页</a>';

            c += nextPage;
            c += lastPage;

            //c+='<div  class="ui padded vertical segment m-padded-tb-large"><div  class="ui middle aligned mobile reversed stackable grid"><div class="eleven wide column"><h3 class="ui header"><a style="color: #0f0f0f;" href="noteComment.html" target="_self" class="m-black">'+data.data[i].noteTitle+'</a></h3><p class="m-text">'+data.data[i].noteContent+'</p><div class="ui grid"><div class="eleven wide column"><div class="ui mini horizontal link list"><div class="item"><img src="'+data.data[i].image+'" alt="" class="ui avatar image"><div class="content"><a href="#" class="header">'+data.data[i].author+'</a></div></div><div class="item"><i class="calendar icon"></i><span>'+data.data[i].createTime+'</span></div><div class="item"><i class="eye icon"></i> <span>'+data.data[i].visit+'</span></div></div></div><div class="right aligned five wide column"><a href="#" target="_self" class="ui teal basic label m-padded-tiny m-text-thin">'+data.data[i].categoryName+'</a></div></div></div><div class="five wide column"><a href="noteComment.html" target="_self"><img src="'+data.data[i].image+'" alt="" class="ui rounded image"></a></div></div></div>';
            $("#notePageList").html(c);

            var note_lis = "";
            for (var i = 0; i < data.list.length; i++) {
                note_lis += '<div  class="ui padded vertical segment m-padded-tb-large"><div  class="ui middle aligned mobile reversed stackable grid"><div class="eleven wide column"><h3 class="ui header"><a style="color: #0f0f0f;" href="noteComment.html?noteID='+data.list[i].noteID+'" target="_self" class="m-black">' + data.list[i].noteTitle + '</a></h3><p class="m-text">' + data.list[i].noteContent + '</p><div class="ui grid"><div class="eleven wide column"><div class="ui mini horizontal link list"><div class="item"><img src="' + data.list[i].image + '" alt="" class="ui avatar image"><div class="content"><a href="#" class="header">' + data.list[i].author + '</a></div></div><div class="item"><i class="calendar icon"></i><span>' + data.list[i].createTime + '</span></div><div class="item"><i class="eye icon"></i> <span>' + data.list[i].visit + '</span></div></div></div><div class="right aligned five wide column"><a href="#" target="_self" class="ui teal basic label m-padded-tiny m-text-thin">' + data.list[i].categoryName + '</a></div></div></div><div class="five wide column"><a href="noteComment.html" target="_self"><img src="' + data.list[i].image + '" alt="" class="ui rounded image"></a></div></div></div>';

            }
            $("#noteList").html(note_lis);
            //定位到页面顶部
            window.scrollTo(0, 0);
        });
    }
</script>
<body>

<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">欢迎来到个人博客系统：<font id="loginUser" color="white">admin</font></h2>
            <a href="index.html" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
            <a href="note.html" class="m-item item m-mobile-hide"><i class="idea icon"></i>发表博客</a>
            <a href="user.html" class="m-item item m-mobile-hide"><i class="clone icon"></i>个人中心</a>
            <a href="category.html" class="m-item item m-mobile-hide"><i class="list icon"></i>分类管理</a>
            <a href="tag.html" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签管理</a>
            <div style="background-color: rgba(255,255,255,0.1);" class="right m-item item m-mobile-hide">
                <div class="ui icon inverted transparent input m-margin-tb-tiny">
                    <input id="searchInput" style="height: 28px;" type="text" placeholder="搜索博客">
                    <i id="searchBtn" class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
</nav>

<!--中间内容-->
<div class="m-container m-padded-tb-big">
    <div class="ui container">
        <div class="ui stackable grid">
            <!--左边博客列表-->
            <div class="eleven wide column">
                <!--header-->
                <div style="margin-top: 20px;" class="ui top attached segment">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <h3 class="ui teal header">博客</h3>
                        </div>
                        <div class="right aligned column">
                            共<font id="totalCount" class="ui orange header m-inline-block m-text-thin"
                                   color="red">x</font>篇
                            <font id="totalPage" class="ui orange header m-inline-block m-text-thin"
                                  color="red">6</font>页
                        </div>
                    </div>
                </div>

                <!--content-->
                <div id="noteList" class="ui attached  segment">
                    <div class="ui padded vertical segment m-padded-tb-large">
                        <div class="ui middle aligned mobile reversed stackable grid">
                            <div class="eleven wide column">
                                <h3 class="ui header"><a style="color: #0f0f0f;" href="noteComment.html" target="_self"
                                                         class="m-black">q你真的理解什么是财富自由吗?</a>
                                </h3>
                                <p class="m-text">
                                    正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img src="https://unsplash.it/100/100?image=1005" alt=""
                                                     class="ui avatar image">
                                                <div class="content"><a href="#" class="header">java小生不才</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i><span>2017-10-01</span>
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i> <span>2342</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="five wide column">
                                <a href="noteComment.html" target="_blank">
                                    <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                                </a>
                            </div>

                        </div>
                    </div>
                    <!--/*-->

                    <div class="ui padded vertical segment m-padded-tb-large">
                        <div class="ui mobile reversed stackable grid">
                            <div class="eleven wide column">
                                <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                                <p class="m-text">
                                    正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img src="https://unsplash.it/100/100?image=1005" alt=""
                                                     class="ui avatar image">
                                                <div class="content"><a href="#" class="header">java小生不才</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i> 2017-10-01
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i> 2342
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href="#" target="_self"
                                           class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                                    </div>
                                </div>
                            </div>

                            <div class="five wide column">
                                <a href="#" target="_blank">
                                    <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                                </a>
                            </div>
                        </div>
                    </div>
                    <!--*/-->
                </div>
                <!--footer-->
                <div class="ui bottom attached segment">
                    <div class="ui middle aligned two column grid">
                        <div id="notePageList" style="width: 100%;" class="column">
                            <a style="margin-left: 7px;" href="#" class="ui mini teal basic button">首页</a>
                            <a href="#" class="ui mini teal basic button">上一页</a>
                            <a href="#" class="ui mini teal basic button">1</a>
                            <a href="#" class="ui mini teal basic button">下一页</a>
                            <a href="#" class="ui mini teal basic button">尾页</a>
                        </div>
                    </div>
                </div>

            </div>

            <!--右边的top-->
            <div class="five wide column">

                <!--分类-->
                <div style="margin-top: 20px;" class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="idea icon"></i>分类
                            </div>
                            <div class="right aligned column">
                                <a href="categoryBlog.html?categoryName=" target="_self">more <i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui teal segment">
                        <div id="categoryList" class="ui fluid vertical menu">
                            <a href="#" class="item">
                                学习日志
                                <div class="ui teal basic left pointing label">13</div>
                            </a>
                            <a href="#" class="item">
                                学习日志
                                <div class="ui teal basic left pointing label">13</div>
                            </a>
                            <!--*/-->
                        </div>
                    </div>
                </div>

                <!--标签-->
                <div class="ui segments m-margin-top-large">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="tags icon"></i>标签
                            </div>
                            <div class="right aligned column">
                                <a href="tagBlog.html?tagName=" target="_self">more <i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div id="tagList" class="ui teal segment">
                        <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                            方法论
                            <div class="detail">23</div>
                        </a>
                        <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                            方法论
                            <div class="detail">23</div>
                        </a>
                        <!--*/-->
                    </div>
                </div>

                <!--最新推荐-->
                <div class="ui segments m-margin-top-large">
                    <div class="ui secondary segment ">
                        <i class="bookmark icon"></i>热门推荐
                    </div>
                    <a id="hotNote">
<!--                        <div class="ui segment">-->
<!--                            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>-->
<!--                        </div>-->
<!--                        <div class="ui segment">-->
<!--                            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>-->
<!--                        </div>-->
                    </a>
                    <!--*/-->
                </div>
                <!--公告-->
                <h4 class="ui horizontal divider header m-margin-top-large">音乐播放</h4>
                <div class="ui segment">
                    <div class="panel-body">
                        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height=86
                                src="//music.163.com/outchain/player?type=2&id=149297&auto=1&height=66">
                        </iframe>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<br>
<br>
<!--底部footer-->
<footer class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../images/zfb.jpg" class="ui rounded image" alt="" style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                <div id="newNote" class="ui inverted link list">
                    <a href="#" class="item m-text-thin">用户故事1（User Story）</a>
                    <a href="#" class="item m-text-thin">用户故事2（User Story）</a>
                    <a href="#" class="item m-text-thin">用户故事3（User Story）</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">gitee</h4>
                <div class="ui inverted link list">
                    <a href="https://gitee.com/guanyu-chen/wenote.git" class="item m-text-thin">链接:
                        https://gitee.com/guanyu-chen/blog.git</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">
                    这是一个人笔记系统、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2021 - 2022 coder-chen</p>
    </div>

</footer>
<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<!--/*/</th:block>/*/-->

<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
</script>
</body>
</html>
